// jsx  =>  javascript+xml(html4)   h5

// const app = React.createElement('h1', { id: 100 }, 'hello react')


//  app 現在是一个组件      class 类组件   函数式组件

//  函数式与函数的区别   函数式组件的首字母大写
//  如果是一個組件 那麽必須要有 return
// jsx必须要有一个根节点
// 属性名不能用js中的关键字。例如class, for
// 单标签要闭合
// 换行建议使用( )包裹
// 老版本(16.8)先引入react才能使用jsx


// import './App.css'

import logo from './assets/logo192.png'


import List from './List.jsx'


function sum (a = 10) {
    console.log('我是函数');
    if (a % 2 === 0) {
        console.log('偶数');
    } else {
        console.log('奇数')
    }
    return '我是一个sum 函数'
}
function renderList () {
    const name = '张三'
    const count = Math.random()
    const obj = { name: 'zs' }
    return (

        <>
            <h1 id='200' className='red'> hello  react  ---{name} </h1>
            <ul>
                <li>vue</li>
                <li>react</li>
                <li>{count}</li>
                <li> {count >= 0.5 ? '大于0.5' : '小于0.5'}</li>
            </ul>
            <hr />
            <br />
            <label htmlFor="aa">点击</label>
            <input type="text" id='aa' />
            <a href="#"> 跳轉</a>

            <img src={logo} alt="" />
            {    /* 下面是对象的写法 我是注释 */}

            {obj.name}
            <br />
            <hr />

            {['a', 'b']}

        </>
    )

}


//  定义一个组件 
function News () {
    return '我是一个新闻组件'
}


function Grils () {
    const girl = {
        name: '小芳',
        age: 19,
        logo: 'https://create-react-app.dev/img/logo.svg',
        skills: ['唱歌', '收稻子', '弹琴'],
        flag: true
    }
    return (
        <div>
            <h1> {girl.name}--------{girl.age}</h1>
            <img src={girl.logo} alt="" />
            {/*  遇到 { } 写js   */}
            <ul>
                {
                    girl.skills.map((item, index) => <li key={item}
                        className={index % 2 === 0 ? 'red' : 'green'}

                    >{item}</li>)
                }
            </ul>


            <div>  {girl.flag ? '男' : '女'}</div>


            <h2 className={girl.flag ? 'active' : ''} >{girl.flag && 'ok'}</h2>

            <div style={{ fontSize: '40px', backgroundColor: 'red' }}>  我是張三</div>
        </div>
    )
}


function isLoading (data) {
    if (data) {
        return '等待加载中....'
    } else {
        return '数据加载完成'
    }
}


// jsx   js  写法   { 这个里面写js}
export default function App () {

    return (
        <>
            {/* {renderList()}


            {sum()}
            <br />

            <News />

            <News></News> */}

            {/* <Grils></Grils>
            {isLoading(true)}
            {isLoading(false)}
 */}


            <List />



        </>
    )

}


